"use client"

import { Input, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from "@nextui-org/react"
import UserList from "./UserList";
import { searchUser } from "@/api/team/tember/search";
import { useState } from "react";
import { User } from "@/type/user";
import { selectUserDetail } from "@/lib/features/login/loginSlice";
import { useAppSelector } from "@/lib/hooks";

let timer: unknown = null;

export const SearchIcon = ({ className }: { className: string }) => {
    return (
        <svg
            aria-hidden="true"
            fill="none"
            focusable="false"
            height="1em"
            role="presentation"
            viewBox="0 0 24 24"
            width="1em"
            className={className}
        >
            <path
                d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
            />
            <path
                d="M22 22L20 20"
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
            />
        </svg>
    );
};

const NewBodyModal = ({ isOpen, onOpenChange }: { isOpen: boolean, onOpenChange: () => void }) => {

    const [data, setData] = useState<User[]>([])

    const { email } = useAppSelector(selectUserDetail)

    return (
        <>
            <Modal
                backdrop="opaque"
                placement="top"
                size="sm"
                classNames={{
                    backdrop: "bg-gradient-to-t from-zinc-900 to-zinc-900/10 backdrop-opacity-20",
                }}
                isOpen={isOpen}
                onOpenChange={onOpenChange}
                onClose={() => {
                    setData([])
                }}
            >
                <ModalContent>
                    <>
                        <ModalHeader className="flex flex-col gap-1">添加成员</ModalHeader>
                        <ModalBody>
                            <Input
                                isClearable
                                size="sm"
                                placeholder="搜索成员"
                                onValueChange={(v) => {
                                    clearTimeout(timer as NodeJS.Timeout)
                                    timer = setTimeout(async () => {
                                        if (timer != null) {
                                            if (v != "" && v != null) {
                                                const result = await searchUser(v)
                                                if (result.code == 200) {
                                                    setData(result.data ?? [])
                                                }
                                            }
                                        }
                                    }, 500)
                                }}
                                classNames={{
                                    label: "text-white",
                                    input: [
                                        "bg-transparent",
                                        "text-black/90 dark:text-white/90",
                                        "placeholder:text-default-700/50 dark:placeholder:text-white/60",
                                    ],
                                    innerWrapper: "bg-transparent",
                                    inputWrapper: [
                                        "shadow-xl",
                                        "bg-default-200/50",
                                        "dark:bg-default/60",
                                        "backdrop-blur-xl",
                                        "backdrop-saturate-200",
                                        "hover:bg-default-200/70",
                                        "dark:hover:bg-default/70",
                                        "group-data-[focus=true]:bg-default-200/50",
                                        "dark:group-data-[focus=true]:bg-default/60",
                                        "!cursor-text",
                                    ],
                                }}
                                radius="lg"
                                startContent={
                                    <SearchIcon className="dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
                                }
                            />
                        </ModalBody>
                        <ModalFooter>
                            <UserList users={data.filter((item) => item.email != email)} />
                        </ModalFooter>
                    </>
                </ModalContent>
            </Modal>
        </>
    )
}

export default NewBodyModal